<template>
	<div class="addshop">
		<div class="addshop_top">
			<el-steps :active="active" finish-status="success">
				<el-step title="1.商品信息"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>
		</div>
		<component :is="changeName" ref="activeComponent"></component>
		<div class="addshop_bottom">
			<el-button
				style="margin-top: 12px;"
				@click="prevFn()"
				v-if="active > 1"
				>上一步</el-button
			>
			<el-button
				style="margin-top: 12px;"
				@click="next"
				v-if="changeName !== 'Thesort'"
				>下一步</el-button
			>
			<el-button
				style="margin-top: 12px;"
				@click="submite"
				v-if="changeName == 'Thesort'"
				>提交</el-button
			>
		</div>
	</div>
</template>
<script>
import Theform from "./Theform.vue";
import Thesort from "./Thesort.vue";
import Theword from "./Theword.vue";
export default {
  data() {
    return {
      active: 1,
      changeName: 'Theform',
      obj: {},
    }
  },
  components: {
    Theform,
    Thesort,
    Theword,
  },
  methods: {
    prevFn() {
      if (this.active > 1) {
        this.active--
        switch (this.active) {
          case 1:
            this.changeName = 'Theform'
            break
          case 2:
            this.changeName = 'Theword'
            break
          case 3:
            this.changeName = 'Thesort'
            break
        }
      }
    },
    next() {
      if (this.active >= 0 && this.active <= 3) {
        switch (this.active) {
          case 1: //验证是否通过
            this.$refs.activeComponent.submitForm('ruleForm').then(
              (res) => {
                Object.assign(this.obj, this.$refs.activeComponent.ruleForm)
                this.active++
                this.changeName = 'Theword'
              },
              (err) => {
                this.$message.error(err)
              }
            )
            break
          case 2: //富文本是否有内容
            if (this.$refs.activeComponent.editorContent) {
              Object.assign(this.obj, this.$refs.activeComponent.editorContent)
              this.active++
              this.changeName = 'Thesort'
            } else {
              this.$message.error('请输入商品详情')
            }
            break
          case 3:
            if (this.$refs.activeComponent.validate()) {
              this.obj.sortnum = this.$refs.activeComponent.sortnum
              this.obj.starnum = this.$refs.activeComponent.starnum
              this.obj.nonum = this.$refs.activeComponent.nonum;
              return true;
            } else {
              this.$message.error('请修改')
            }
            break
        }
      }
    },
    submite() {
      if(this.next()){
        
      console.log(this.obj)
      this.$router.push("/layout/shopadmin")
      };
    },
  },
}
</script>
<style lang="scss" scoped>
.addshop {
	width: 100%;
	height: 100%;
	.addshop_top {
	}
	.addshop_bottom {
		margin-top: 50px;
	}
}
</style>
